<script src="../../../Desktop/server/server.js"></script>
<template>
    <div class="bianji">

        <div style="width: 100%;height: 45px;">

             <div style="text-align: center; font-size: 2em;">{{username}}</div>
   
            <router-link to="/my" slot="left">
            <i class="el-icon-arrow-left" style="float: left;margin-top:-5%;margin-left: 5%;"></i>
            </router-link>
        </div>
            <div class="fenge" style="opacity:0.4;float: left;"></div>
       
            <div class="cricle5"></div>
            

           <div class="bj1">

            <p>用户名：{{username}}</p>
            <p>id：{{sid}}</p>

            </div>

            <div class="jieshao">
                
                <input class="form-control" placeholder="输入你的个性简介吧" style="float:left;margin-top:5%;border-top: none;border-left: none;border-right: none;">
            </div>

            <mt-button class="btnne" @click="logout()">
                <div ref="logout_">退出登录</div> 
            </mt-button>
        

       

    </div>
</template>

<script>
import  {mapState} from "vuex"

export default {
    data(){
        return {

            username:"",
            sid:""

        }
    },
    computed: {

        ...mapState({
                btn:state =>state.btn
            })

    },
    mounted() {

         this.getUser();

    },
    methods: {

            getUser(){
                var _this = this;
                this.$http.post('/users/user').then(function (res) {
                    if (res.data.result == 0) {
                        console.log('用户未登录');
                        _this.username = '';
                        _this.sid = '';                      
                    } else if (res.data.result == 1) {
                       console.log('用户已登录');
                        console.log(res.data);
                        _this.username = res.data.username; 
                        _this.sid = res.data.sid;          
                        console.log(_this.username);
   
                    }
                })
               
            },

         logout(){
                var _this = this;
                var mymessage = confirm('确定退出登录?', '提示',{type:"warning"});
                 if(mymessage == true){

                      _this.$http.post('/users/logout').then(function (res) {
                    if (res.data.result == 0) {
                        console.log('用户未登录')
                    } else if (res.data.result == 1) {
                        console.log('用户退出登录')
                        res.data.result == 0;
                        _this.username = '';
                        _this.sid = ''; 
                        _this.$router.push('/top');
                    }
                })
                    
                 }
               
            }

        
    }
}
</script>

<style>

.bj1{
  
    margin-top:10%;
    float: left;
    margin-left: 10%;
    text-align: left;
    font-size: 1em;
    font-family: "Microsoft YaHei";
    
}


.btnne {
    float: left;
    margin-top: 90%;
    margin-right: auto;
    margin-left: auto;
}

.cricle5 {
       background-color: #324057;
        width:20%;
        height:6em;
        float: left;
        margin-left: 6%;
        margin-top: 6%;
        border: 2px #324057 solid;
        border-radius:50%;
}

.jieshao {
   
        margin-top:5%;
    }


</style>